<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的主页</title>
<link rel="icon" href="../img/BaiYi_title_icon.png" />
<link type="text/css" rel="stylesheet" href="../css/foundation.css" />
<link type="text/css" rel="stylesheet" href="../css/baiyi.css" />
<script type="text/javascript" src="../js/vendor/jquery.js"></script>
<script type="text/javascript" src="../js/foundation/foundation.js"></script>
<script type="text/javascript"
	src="../js/foundation/foundation.topbar.js"></script>
<script type="text/javascript"
	src="../js/foundation/foundation.offcanvas.js"></script>
<script type="text/javascript"
	src="../js/foundation/foundation.reveal.js"></script>
<script type="text/livescript"
	src="../js/foundation/foundation.equalizer.js"></script>
<script type="text/javascript"
	src="../js/foundation/foundation.dropdown.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(document).foundation();
		$(document).foundation('topbar', 'reflow');
		$(document).foundation('offcanvas', 'reflow');
		$(document).foundation('revaeal', 'reflow');
		$(document).foundation('equalizer', 'reflow');
		$(document).foundation('dropdown', 'reflow');
	});
</script>
</head>
<body>
	<div class="off-canvas-wrap" data-offcanvas>
		<div class="inner-wrap">
			<jsp:include page="nav.jsp"></jsp:include>
			<!-- Off Canvas Menu 显示简易个人信息 -->
			<jsp:include page="user.jsp"></jsp:include>
			<!---------------------弹窗全写在这里了---------------------->
			<!--创建相册-->
			<div id="create_album" class="reveal-modal" data-reveal
				style="max-width:456px; margin-top:150px;">
				<h4>创建相册></h4>
				<hr />
				<!--表单内容-->
				<form action="create_album" method="post">
					<div class="row">
						<div class="small-5 columns">
							<label for="right-label" class="center inline">相册名称：</label>
						</div>
						<div class="small-7 columns">
							<input type="text" name="album.albumName" />
						</div>
					</div>
					<div class="row">
						<div class="small-5 columns">
							<label for="right-label" class="center inline">相册分类：</label>
						</div>
						<div class="small-7 columns ">
							<select name="albumTypeId">
								<c:forEach items="${all_type }" var="type">
									<option value="${type.albumTypeId }">${type.albumType }</option>
								</c:forEach>
							</select>
						</div>
					</div>
					<div class="row">
						<div class="small-5 columns">
							<label for="right-label" class="center inline">设置权限：</label>
						</div>
						<div class="small-7 columns">
							<select name="album.albumRestrict">
								<option value="0">所有人可见</option>
								<option value="1">只对好友可见</option>
								<option value="2">关注我的人可见</option>
								<option value="3">仅自己可见</option>
							</select>
						</div>
					</div>
					<hr />
					<div class="row">
						<div class="large-12  columns">
							<input type="submit" value="确定" class="button small right" /> <input
								type="reset" value="重设" class="button small secondary right" />
						</div>
					</div>
				</form>
			</div>
			<!--上传照片-->
			<div id="upload_pictures" class="reveal-modal" data-reveal>
				<form action="uploadInMyHome" method="post"
					enctype="multipart/form-data">
					<h2>上传照片>普通上传</h2>
					<hr />
					<div class="row">
						<div class="large-5 mediun-6 columns">
							<div class="small-5 columns">
								<label for="right-label" class="right inline">上传到</label>
							</div>
							<div class="small-7 columns">
								<select name="id">
									<c:forEach items="${myAlbum }" var="album">
										<option value="${album.albumId }">${album.albumName }</option>
									</c:forEach>
								</select>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="large-12"
							style="text-align: center; margin-top:6.25rem; margin-bottom: 6.25rem;">
							<input type="file" name="image" id="image" value="选择照片..."
								required="required" multiple="multiple" accept="image/*" />
							<h4>按住Ctrl可多选照片</h4>
							<input type="submit" value="确定上传">
						</div>
					</div>
				</form>
			</div>
			<!--添加相册分类/Add album classification-->
			<div id="add_album_classification" class="reveal-modal" data-reveal
				style="max-width:456px; margin-top:150px;">
				<h2>添加相册分类</h2>
				<hr />
				<form method="post" action="addAlbumType">
					<div class="row">
						<label>分类名:</label> <input type="text" name="albumType.albumType">
					</div>
					<div class="row">
						<div class="large-12"
							style="text-align: center; margin-top:6.25rem; margin-bottom: 6.25rem;">
							<input type="submit" value="+确定添加" class="button" />
						</div>
					</div>
				</form>
			</div>
			<!--修改相册分类/change album classification-->
			<div id="change_album_classification" class="reveal-modal"
				data-reveal>
				<h2>修改相册分类</h2>
				<hr />
				<div class=" large-4 medium-6 columns">
					<div class="row collapse">
						<c:forEach items="${types }" var="type">
							<form method="post" action="updateAlbumType">
								<div class="small-10 columns">
									<input type="text" placeholder="${type.albumType }"
										name="albumType.albumType">
								</div>
								<div class="small-2 columns">
									<a href="#" class="button postfix">修改</a>
								</div>
							</form>
						</c:forEach>
					</div>
				</div>
			</div>
			<!--删除相册分类/delete album classification-->
			<div id="delete_album_classification" class="reveal-modal"
				data-reveal>
				<h2>删除相册分类</h2>
				<hr />
				<form method="post" action="deleteAlbumType">
					<div class="row collapse">
						<c:if test="${!empty types }">
							<c:forEach items="${types }" var="type">
								<div style="float: left;padding: 10px;">
									<input type="checkbox" placeholder="人物" name="typeId"
										value="${type.albumTypeId }">${type.albumType }
								</div>
							</c:forEach>
						</c:if>
					</div>
					<div class="row">
						<div class="large-12"
							style="text-align: center; margin-top:6.25rem; margin-bottom: 6.25rem;">
							<input type="submit" value="删除" class="button" /> <input
								type="reset" value="取消" class="button" />
						</div>
					</div>
				</form>
			</div>


			<!----------------------------------------------------------------------------------------->
			<!---------------------------- 内容区域可替换------------------------------------------------>
			<!----------------------------------------------------------------------------------------->
			<div
				style="background-repeat: no-repeat; background-position: center top; background-attachment: scroll; background-image: url('../img/picture/bg_top01.jpg');">
				<div class="row">
					<div class="large-9  medium-8 columns">
						<h2 style="color:#5D7895">${currentUser.qzoneName }</h2>
						<span style="color:#5D7895;"> <c:if
								test="${empty currentUser.qzoneAutograph }">
						您还未填写空间签名哦</c:if> <c:if test="${!empty currentUser.qzoneAutograph }">${currentUser.qzoneAutograph }</c:if>
							<a href="#">&nbsp;&nbsp;(http://user.qzone.baiyi.com/home)</a></span>
					</div>
				</div>
				<div class="row" style="margin-top: 20px;">
					<!--头像-->
					<div class="large-3 medium-4 columns">
						<div class="panel"
							style="width:200px; height:200px; padding:0.5rem;">
							<img style="height:182px;" src="${ currentUser.userPortrait }"
								alt="暂无头像" />
						</div>
					</div>
					<!--标题栏-->
					<div class="large-9 medium-8 columns">
						<div class="large-9 medium-8 columns" style="padding-top:53px;">
							<span style="color:#5D7895; font-size:1.25rem;">${currentUser.userName }</span><span
								class="lv"></span>
						</div>

						<div class="large-3 medium-4 columns">
							<button class="" disabled="disabled">
								赞 &#40;
								<c:if test="${empty currentUser.userHot }">0</c:if>
								<c:if test="${!empty currentUser.userHot }">${currentUser.userHot } </c:if>
								&#41;
							</button>
							<div>
								<img src="../img/icon_png/weather-sunny.png" /><span
									style="margin-left:10px; color:#95D3E5;">海口&nbsp;
									&nbsp;|&nbsp; &nbsp; 晴</span>
							</div>
						</div>
						<div class="large-12  medium-12 columns" style="">
							<ul class="inline-list" style="padding-top:26px;">
								<li><a href="toMyHome">相册</a></li>
								<li><a href="toMyMessageBoard">留言板</a></li>
							</ul>
						</div>
					</div>
				</div>
				<!--相册区域--------------------------------------------------->
				<div class="row" style="background-color:#F2F2F2" data-equalizer>
					<!--头部工具栏-->
					<div class="large-12 medium-12 small-12 columns">
						<hr />
						<span class="left" style="font-size:1.8125rem;">相册</span>
						<!--分类管理/添加/删除/修改-->
						<div class="right">
							<a class="button button right small alert" data-dropdown="drop1"
								aria-controls="drop1" aria-expanded="false"> &nabla; 分类管理</a>
							<ul id="drop1" class="f-dropdown" data-dropdown-content
								aria-hidden="true" tabindex="-1">
								<li><a data-reveal-id="add_album_classification">添加相册分类</a></li>
								<li><a data-reveal-id="change_album_classification">修改相册分类</a></li>
								<li><a style="background-color:#BD2D30; color:#ffffff;"
									data-reveal-id="delete_album_classification">删除相册分类</a></li>
							</ul>
							<!--创建相册-->
							<a class="button right small secondary"
								data-reveal-id="create_album"> &oplus; 创建相册</a>
							<!--上传照片-->
							<a class="button right small " data-reveal-id="upload_pictures">
								&uArr; 上传照片</a>
						</div>
						<hr />
					</div>
					<!--分类相册显示-->
					<div class="album_panel_style">
						<div class="large-12 medium-12 small-12 columns">
							<c:if test="${!empty myAlbum }">
								<c:forEach items="${types }" var="type">
									<h4>${type.albumType }</h4>
									<c:forEach items="${myAlbum }" var="album">
										<c:if
											test="${type.albumTypeId eq album.tbAlbumType.albumTypeId }">
											<div class="large-2 medium-3  columns " data-equalizer-watch>
												<div class="panel">
													<a href="toOthersAlbum?id=${album.albumId}"> <img
														src="${album.showPhotoPath }" alt="暂无封面" /></a> <span>${album.albumName }</span>
												</div>
											</div>
										</c:if>
									</c:forEach>
									<hr>
								</c:forEach>
							</c:if>
							<c:if test="${empty myAlbum }"> 暂无相册!
								</c:if>
						</div>
					</div>
					<!--最近访客-->

					<div class="large-12 medium-12 small-12 columns panel">
						<span style="font-size:1.8125rem;">最近访客</span> <span
							style="font-size:0.8125rem; color:#5D7895">|访问总数：<c:if
								test="${empty user.visitorSize }">0</c:if> <c:if
								test="${!empty user.visitorSize }">${ user.visitorSize }</c:if>
						</span>
						<hr />
						<div class="recent_visitor">
							<ul class="inline-list">
								<c:forEach items="${myVisitor }" var="visitor">
									<li><img src="${visitor.tbUserByVisitorId.userPortrait }"
										alt="暂无头像" /> <span><fmt:formatDate
												value="${visitor.visitTime }" /> </span></li>
								</c:forEach>
							</ul>
						</div>
					</div>
				</div>

				<!----------------------------------------------------------------------------------------->
				<!---------------------------- 内容区域------end-------------------------------------------->
				<!----------------------------------------------------------------------------------------->
				<!------------------页脚--------------------->
				<jsp:include page="footer.jsp"></jsp:include>
				<!-- close the off-canvas menu -->
				<a class="exit-off-canvas"></a>
			</div>
		</div>
	</div>
</body>
</html>